<template>
    <div class="HomePage" @scroll="scrollHandler" >
        <header>
            <HomePagetop :list="list"></HomePagetop>
            <ul class="nav-t">
                <li><div class="avatar-out"><img src="/images/1.jpg" alt=""></div></li>
                <li><span>+&nbsp;关注</span></li>
                <li><i class="yo-ico">&#xe61d;</i></li>
            </ul>
            <h2>特立独行的猫</h2>
            <span class="views">与你分享我的观点，weibo：Alex Wang</span>
            <ul class="nav-bot">
                <li>
                    <span>2302</span>
                    <i>赞</i>
                </li>
                <li>
                    <span>2069</span>
                    <i>收藏</i>
                </li>
                <li>
                    <span>22</span>
                    <i>关注</i>
                </li>
                <li>
                    <span>2302</span>
                    <i class="last-i">粉丝</i> 
                </li>
            </ul>
        </header>
        <footer>
            <!-- <ul>
                <li class="font-height ">动态 <div class="color-height"></div></li>
                <li class="font-height">文章 <div class="color-height"></div></li>
                <li class="font-height">资料 <div class="color-height"></div></li>
            </ul> -->
            <van-tabs v-model="active" color="#3d7eff" class="footer_tabs" line-width="40px" line-height="6px" @click="homePageclick">
                <van-tab title="动态" to="/Index/MySettings/HomePage/personageActive"><router-view></router-view></van-tab>
                <van-tab title="文章" to="/Index/MySettings/HomePage/Article"><router-view></router-view></van-tab></van-tab>
                <van-tab title="资料" to="/Index/MySettings/HomePage/PersonageData" ><router-view></router-view></van-tab>
                
            </van-tabs>
        </footer>
      
    </div>
</template>
<script>
import HomePagetop from "@/components/homePage_top";
import Vue from "vue";
import { Tab, Tabs } from "vant";
import axios from "axios";
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      active: 0,
      list: {
        hp_top: false,
        i_cont: "&#xe68d;",
        user_name: "特立独行的猫的动态",
      },
      userList:null
    };
  },
  components: {
    HomePagetop,
  },
  created(){
      this.loadUserList();
  },
  mounted() {
    this.$router
      .push("/Index/MySettings/HomePage/personageActive")
      .catch((err) => err);
    
  },
  methods: {
    loadUserList(){
      this.bus.$on("change", (a) => {
        // console.log(a)
        //  this.userList=list   
        });
        // console.log(this.userList);
    },
    homePageclick(value) {
      this.active = value;
    },
    scrollHandler(value) {
      let a = document.querySelector(".HomePage_top");
      if (value.srcElement.scrollTop > 30) {
        a.style.position = "fixed";
        this.list.hp_top = true;
      } else {
        a.style.position = "static";
        this.list.hp_top = false;
      }
      // console.log(value.target.scrollTop,value.target.scrollTop);
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../../assets/stylus/border.styl';

.HomePage {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  header {
    width: 100%;
    height: 2.9rem;

    .nav-t {
      display: flex;
      position: relative;

      li:first-child {
        padding: 2px 0px 0px 14px;

        .avatar-out {
          width: 0.68rem;
          height: 0.68rem;
          border: 2px solid #ffffff;
          border-radius: 50%;
          background-color: #fff;
          overflow: hidden;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      li:nth-child(2) {
        width: 0.84rem;
        height: 0.32rem;
        line-height: 0.32rem;
        border-radius: 0.16rem;
        color: #ffffff;
        background-color: #3d7eff;
        text-align: center;
        position: absolute;
        right: 0.6rem;
        top: 0.19rem;
      }

      li:nth-child(3) {
        color: #3d7eff;
        font-size: 0.36rem;
        position: absolute;
        right: 0.12rem;
        top: 0.04rem;
      }
    }

    h2 {
      font-weight: 800;
      font-size: 0.18rem;
      padding: 0 0 0.08rem 0.15rem;
    }

    .views {
      color: #999;
      padding-left: 0.15rem;
    }

    .nav-bot {
      display: flex;
      justify-content: space-between;
      border-radius: 8px;
      width: 92%;
      margin-top: 0.12rem;
      margin-left: 4%;
      box-shadow: 0px 5px 15px rgb(228 228 228);

      li {
        flex: 1;
        color: #ffffff;
        text-align: center;
        padding: 0.06rem 0;

        span {
          display: block;
          color: #333;
          font-weight: 600;
          font-size: 0.18rem;
        }

        i {
          color: #999;
          display: inline-block;
          font-size: 0.14rem;
        }
      }
    }
  }

  footer {
    height: 100%;
  }
}
</style>